<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<base href="<%=basePath%>">

	<title>注册页面</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style type="text/css">
		@IMPORT url("css/base.css");
		#register{
			width:1340px;
			height:1400px;
			margin-top: 5px;
		}
		#register-left{
			width:180px;
			height:100%;
			float: left;
		}
		#register-center{
			width:980px;
			height:100%;
			float:left;
			border-left: 1px #eaebed solid;
		}
		#register-right{
			width:180px;
			height:100%;
			float:left;
		}

		.center-body-left{
			width:700px;
			height:100%;
			float:left;
		}
		.center-body-right{
			width:280px;
			height:100%;
			float:left;
		}
		.gps {

			display: block;
			padding: 5px 5px;
			font-size: 14px;
			background: linear-gradient(to right, #eee, #FEFFFE);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-family: "microsoft yahei";
			margin-bottom: 10px;
			border-radius: 20px;
		}
		.gps a,
		.gps span {
			font-size: 14px;
			float: left;
			padding: 0 5px;
			color: #000000;
			max-width: 250px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.gps img {
			float: left;
			width: 19px;
			height: 19px;
		}
		.input{
			width:100%;
			height:450px;
			margin-top: 20px;
		}
		.input-case{
			width:400px;
			height:420px;
			margin:30px 150px;
			border: 2px #fff solid;
		}
		.yonghu{
			width:100%;
			height:40px;
			line-height:40px;
			text-align:center;
			font-size:20px;
			color:#437ad7;
		}
		.input-sex{
			width:300px;
			height:40px;
			margin-left: 12px;
			margin-top: 5px;
		}
		.input-text input{
			width:300px;
			height：40px;
			margin-top: 5px;
			margin-left: 10px;
			border: 1px #999999 solid;
		}
		.input-text-left{
			margin-top:5px;
			margin-left:3px;
			width:85px;
			height:40px;
			float:left;
		}

		.input-text-left a{
			height:40px;
			line-height: 40px;
		}

		.input-text-center{
			margin-top:5px;
			width:300px;
			height:40px;
			float: left;
		}
		.input-text-center input{
			margin-top: 0px;
			margin-left: 0px;
		}
		/* .input-text-right{
        width:100px;
        height:40px;
        float: right;
        background-color:#3881f0;
        } */

		.authcode_img b{
			width:20px;
			height:40px;
			font-size:25px;
		}

		.left{
			width:200px;
			height:100%;
			float: left;
		}
		.right{
			width:100px;
			height:100%;
			float: right;
			background-color:#3881f0;
		}

		#check_authcode b{
			width:20px;
			height:40px;
			font-size:25px;
		}

	</style>

	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

	<script type="text/javascript">

		function getAuthCode(){
			var authcode = "";
			var fontStyle = new Array("微软雅黑","Courier New","幼圆","宋体","Dotum","楷书","华文行楷");
			var colors = new Array("#1212c9","#c9b612","#12c930","#c912b1","#12c9c7","#c91f12","#fe7f02");
			var n = 4;
			for(var i=0;i<n;i++){
				var num = parseInt(Math.random()*10);
				authcode += num;
				$("#check_authcode .code"+(i+1)+"").html(num);
				var maxJ = 1;
				for(var j=0;j<maxJ;j++){
					var fontIndex = parseInt(Math.random()*10);
					var colorIndex = parseInt(Math.random()*10);
					if(fontIndex<fontStyle.length&&colorIndex<colors.length){
						$("#check_authcode .code"+(i+1)+"").css("font-family",fontStyle[fontIndex]).css("color",colors[colorIndex]);
					}else{
						maxJ++;
					}
				}
			}
			return authcode;
		}
		$(function(){
			var authcode = getAuthCode();
			$("#authcode").val(authcode);
			$("#check_authcode").click(function(){
				authcode = getAuthCode();
				$("#authcode").val(authcode);
				$("#check_authcode").val("");
			});



			$("input[name='name']").blur(function(){
				//3-15位数字、英文或下划线
				var regex = /^[0-9a-zA-Z_]{3,15}$/;
				if(regex.test($(this).val())){
				}else{
					alert("不满足条件3-15位数字、英文或下划线");
				}
			});


			$("input[name='email']").blur(function(){
				//填写正确的邮箱格式，用于找回密码
				var regex =  /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
				if(regex.test($(this).val())){
				}else{
					alert("不满足邮箱的正确格式");
				}
			});

			$("input[name='password']").blur(function(){
				var regex =  /^.{5,16}$/;
				if(regex.test($(this).val())){
				}else{
					alert("不满足密码的正确格式");
				}
			});

			$("input[name='password1']").blur(function(){
				var pwd = $("input[name='password']").val();
				if(pwd != ""&&$(this).val()== pwd){
				}else{
					alert("两次密码输入不一致");
				}
			});


			$("input[name='authcode']").blur(function(){
				var rand = $("#authcode").val();
				var inputs = $("input[name='authcode']").val();
				if(inputs==""){
					alert("请输入验证码");
				}else{
					if(inputs.toUpperCase()==rand.toUpperCase()){
					}else{
						alert("验证码输入错误");
					}
				}
			});


		});
	</script>
</head>

<body>
<div id="top">
	<jsp:include page="../../WEB-INF/includes/top.inc.jsp"></jsp:include>
</div>
<div id="register">
	<div id="register-left"></div>

	<div id="register-center">
		<div class="center-top">
			<b>论坛信息：</b>会员 <span>221</span> 人&nbsp;&nbsp; 帖子
			<span>179</span> 篇 &nbsp;&nbsp;&nbsp;&nbsp;
			<b>站长寄语：</b>梦虽然遥不可及，但并不是不可能实现；只要坚持，就会离梦越来越近！
		</div>
		<div class="center-body">

			<div class="center-body-left">

				<div class="gps">
					<span>您的位置：</span>
					<img alt="首页" src="images/home.png">
					<a href="jsp/public/first.jsp" style="padding-left: 0px;">首页</a>
					<span>&raquo;</span><span>注册</span>
					<div class="clear"></div>
				</div>

				<div class="input">
					<div class="input-case">
						<form action="InfoServlet" method="post">
							<div class="yonghu">
								用户注册
							</div>
							<div class="input-text"><a style="font-size: 16px;margin-left: 16px;">用户名&nbsp;:</a><input name="name" type="text" style="width:300px;height:40px;margin-left: 14px;" placeholder="3-15位数字、英文或下划线"/></div>
							<div class="input-text"><a style="font-size: 16px;margin-left: 31px;">性别&nbsp;:</a>
								<select class="input-sex" name="sex">
									<option value="男" selected="selected">男</option>
									<option value="女">女</option>
								</select>
							</div>
							<div class="input-text"><a style="font-size: 16px;margin-left: 31px;">邮箱&nbsp;:</a><input name="email" type="text" style="width:300px;height:40px;margin-left: 14px;" placeholder="请填写正确邮箱,用于找回密码"/></div>
							<div class="input-text"><a style="font-size: 16px;margin-left: 31px;">密码&nbsp;:</a><input  name="password" type="password" style="width:300px;height:40px;margin-left: 14px;" placeholder="5-16位任意字符"/></div>
							<div class="input-text"><a style="font-size: 16px;">确认密码&nbsp;:</a><input name = "password1" type="password" style="width:300px;height:40px;margin-left: 14px;" placeholder="重复输入一遍密码"/></div>
							<input type="hidden" id="authcode" />
							<div class="input-text">
								<div class="input-text-left" >
									<a style="font-size: 16px;margin-left: 18px;">验证码&nbsp;:</a>
								</div>
								<div class="input-text-center" >
									<div class="left">
										<input type="text" name="authcode" style="width:300px;height:40px"/>
									</div>
									<div class="right" id="check_authcode">
										<b class="code1"></b>
										<b class="code2"></b>
										<b class="code3"></b>
										<b class="code4"></b>
									</div>
									<!-- <div class="input-text-right" ></div> -->
									<p><a style="color:#d35620;margin-top:10px;">其余信息请注册后在个人中心填写 </a></p>
									<input type="submit" value="注册" style="width:120px;height:40px;background-color:#3881f0 ;margin-left: 25px;color: white;font-size: 14px;"/>
								</div>

							</div>
						</form>
					</div>
				</div>


			</div>

			<div class="center-body-right">
				<jsp:include page="../../WEB-INF/includes/body.left.inc.jsp"></jsp:include>
			</div>
		</div>
	</div>


	<div id="register-right"></div>
</div>
<div id="bottom">
	<jsp:include page="../../WEB-INF/includes/bottom.inc.jsp"></jsp:include>
</div>
</body>
</html>
